<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<div id="app" v-cloak class="page-home page-statistics-data row-content am-cf">
    <!-- 商城统计 -->
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
            <div class="widget am-cf">
                <div class="widget-head">
                    <div class="widget-title">数据统计</div>
                </div>
                <div class="widget-body am-cf">

                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="widget-card card__primary am-cf">
                            <div class="card-header">今日订单量</div>
                            <div class="card-body">
                                <a href="/company/fankui/index?tab=0" >
                                    <div class="card-value">
                                        <?= $data['widget-card']['count1'] ?>
                                    </div>
                                    <div class="card-description">今日订单总数量</div>
                                    <span class="card-icon iconfont icon-haoping2"></span>
                                </a>
                            </div>
                        </div>
                    </div>


                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="widget-card card__blue am-cf">
                            <div class="card-header">全部订单总量</div>
                            <div class="card-body">
                                <a href="/company/fankui/index?tab=0" >
                                    <div class="card-value">
                                        <?= $data['widget-card']['count2'] ?>
                                    </div>
                                    <div class="card-description">全部订单总数量</div>
                                    <span class="card-icon iconfont icon-goods"></span>
                                </a>
                            </div>
                        </div>
                    </div>


                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="widget-card card__violet am-cf">
                            <div class="card-header">已完成订单</div>
                            <div class="card-body">
                                <a href="/company/fankui/index?tab=5" >
                                    <div class="card-value">
                                        <?= $data['widget-card']['count3'] ?>
                                    </div>
                                    <div class="card-description">已完成订单总数量</div>
                                    <span class="card-icon iconfont icon-order"></span>
                                </a>
                            </div>
                        </div>
                    </div>


                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="widget-card card__red am-cf">
                            <div class="card-header">未完成订单</div>
                            <a href="/company/fankui/index?tab=3" >
                                <div class="card-body">
                                    <div class="card-value">
                                        <?= $data['widget-card']['count4'] ?>
                                    </div>
                                    <div class="card-description">未完成订单总数量</div>
                                    <span class="card-icon iconfont icon-user"></span>
                                </div>
                            </a>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>

    <!-- 实时概况 -->
    <!-- <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
            <div class="widget am-cf">
                <div class="widget-head">
                    <div class="widget-title">实时概况</div>
                </div>
                <div class="widget-body am-cf">
                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                        <div class="widget-outline dis-flex flex-y-center">
                            <div class="outline-left">
                                <img src=""
                                     alt="">
                            </div>
                            <div class="outline-right dis-flex flex-dir-column flex-x-between">
                                <div style="color: rgb(102, 102, 102); font-size: 1.3rem;">销售额(元)</div>
                                <div style="color: rgb(51, 51, 51); font-size: 2.4rem;"><?= $data['widget-outline']['order_total_price']['tday'] ?></div>
                                <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                                    昨日：<?= $data['widget-outline']['order_total_price']['ytd'] ?></div>
                            </div>
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                        <div class="widget-outline dis-flex flex-dir-column flex-x-between">
                            <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">支付订单数</div>
                            <div style="color: rgb(51, 51, 51); font-size: 2.4rem;"><?= $data['widget-outline']['order_total']['tday'] ?></div>
                            <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                                昨日：<?= $data['widget-outline']['order_total']['ytd'] ?></div>
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                        <div class="widget-outline dis-flex flex-y-center">
                            <div class="outline-left">
                                <img src=""
                                     alt="">
                            </div>
                            <div class="outline-right dis-flex flex-dir-column flex-x-between">
                                <div style="color: rgb(102, 102, 102); font-size: 1.3rem;">新增用户数</div>
                                <div style="color: rgb(51, 51, 51); font-size: 2.4rem;"><?= $data['widget-outline']['new_user_total']['tday'] ?></div>
                                <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                                    昨日：<?= $data['widget-outline']['new_user_total']['ytd'] ?></div>
                            </div>
                        </div>
                    </div>
                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                        <div class="widget-outline dis-flex flex-dir-column flex-x-between">
                            <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">下单用户数</div>
                            <div style="color: rgb(51, 51, 51); font-size: 2.4rem;"><?= $data['widget-outline']['order_user_total']['tday'] ?></div>
                            <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                                昨日：<?= $data['widget-outline']['order_user_total']['ytd'] ?></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <!-- 近七日交易走势 -->
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
            <div class="widget widget-survey am-cf" v-loading="survey.loading">
                <div class="widget-head">
                    <div class="widget-title">科室调查统计</div>
                </div>
                <div class="widget-screen am-cf am-margin-bottom">
                    <!-- 日期选择器 -->
                    <div class="yxs-date-editor am-fl">
                        <el-date-picker
                                v-model="survey.dateValue"
                                type="daterange"
                                size="small"
                                @change="onChangeDate"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <!-- 快捷选项 -->
                    <div class="widget-screen_shortcut am-fl">
                        <div class="shortcut-days am-cf">
                            <div class="shortcut-days_item am-fl">
                                <a href="javascript:void(0);" @click="onFastDate(7)">7天</a>
                            </div>
                            <div class="shortcut-days_item am-fl">
                                <a href="javascript:void(0);" @click="onFastDate(30)">30天</a>
                            </div>
                            <div class="shortcut-days_item am-fl">
                                <a href="javascript:void(0);" @click="onFastDate(365)">1年</a>
                            </div>
                            <div class="shortcut-days_item item-clear am-fl">
                                <a href="javascript:void(0);" @click="onFastDate(0)">清空</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="widget-body am-cf">
                    <div id="echarts-trade" class="widget-echarts"></div>
                </div>
            </div>
        </div>
    </div>


    <!-- 排行榜 -->
    <div class="row">
        <div class="am-u-sm-6 am-margin-bottom">
            <div class="widget-ranking widget am-cf">
                <div class="widget-head">
                    <div class="widget-title">科室满意度排行榜</div>
                </div>
                <div class="widget-body am-cf">
                    <table width="100%" class="am-table am-table-compact am-table-striped
                         tpl-table-black">
                        <thead>
                        <tr>
                            <th class="am-text-center" width="15%">排名</th>
                            <th class="am-text-left" width="40%">名称</th>
                            <th class="am-text-center" width="15%">满意度</th>
                            <th class="am-text-center" width="15%">总订单量</th>
                            <!-- <th class="am-text-center" width="15%">未完成订单量</th> -->
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, index) in cateRanking">
                            <td class="am-text-middle am-text-center">
                                <div v-if="index < 3 && item.count2 > 0" class="ranking-img">
                                    <img :src="'/static/assets/store/img/statistics/ranking/0' + (index + 1) + '.png'" alt="">
                                </div>
                                <span v-else>{{ index + 1 }}</span>
                            </td>
                            <td class="am-text-middle">
                                <p class="ranking-item-title am-text-truncate">{{ item.name }}</p>
                            </td>

                            <td class="am-text-middle am-text-center">{{ item.count2 }}</td>
                            <td class="am-text-middle am-text-center">{{ item.count3 }}</td>
                            <!-- <td class="am-text-middle am-text-center">{{ item.count4 }}</td> -->
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="am-u-sm-6 am-margin-bottom">
            <div class="widget-ranking widget am-cf">
                <div class="widget-head">
                    <div class="widget-title">维护人员榜</div>
                </div>
                <div class="widget-body am-cf">
                    <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black">
                        <thead>
                        <tr>
                            <th class="am-text-center" width="15%">排名</th>
                            <th class="am-text-left" width="40%">姓名</th>
                            <th class="am-text-center" width="15%">满意度</th>
                            <th class="am-text-center" width="15%">已完成订单量</th>
                            <!-- <th class="am-text-center" width="15%"><a href="/company/stat/index?tab=1" >未完成订单量</a></th> -->
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item, index) in adminRanking">
                            <td class="am-text-middle am-text-center">
                                <div v-if="index < 3 && item.count2 > 0" class="ranking-img">
                                    <img :src="'/static/assets/store/img/statistics/ranking/0' + (index + 1) + '.png'" alt="">
                                </div>
                                <span v-else>{{ index + 1 }}</span>
                            </td>
                            <td class="am-text-middle">
                                <p class="ranking-item-title am-text-truncate">{{ item.name }}</p>
                            </td>

                            <td class="am-text-middle am-text-center">{{ item.count2 }}</td>
                            <td class="am-text-middle am-text-center">{{ item.count3 }}</td>
                            <!-- <td class="am-text-middle am-text-center">{{ item.count4 }}</td> -->
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/assets/common/js/echarts.min.js"></script>
<script src="/static/assets/common/js/echarts-walden.js"></script>

<script src="/static/assets/common/js/vue.min.js?v=1.1.35"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            // 数据概况
            survey: {
                loading: false,
                dateValue: ['<?= $startDate ?>', '<?= $endDate ?>'],
                values: <?= json_encode($survey,true) ?>,
                order_total: <?= $data['widget-echarts']['order_total'] ?>,
                order_total_price: <?= $data['widget-echarts']['order_total_price'] ?>,
            },
            // 商品销售榜
            cateRanking: <?= json_encode($cateRanking, true) ?>,
            // 用户消费榜
            adminRanking: <?= json_encode($adminRanking, true) ?>
        },

        mounted() {
            // 近七日交易走势
            this.drawLine();
        },

        methods: {

            // 监听事件：日期选择快捷导航
            onFastDate: function (days) {
                var startDate, endDate;
                // 清空日期
                if (days === 0) {
                    this.survey.dateValue = [];
                } else {
                    startDate = $.getDay(-days);
                    endDate = $.getDay(0);
                    this.survey.dateValue = [startDate, endDate];
                }
                // api: 获取数据概况
                this.__getApiData__survey(startDate, endDate);

                window.location.href = '/company/main/index?startDate='+startDate+'&endDate='+endDate+'';
            },

            // 监听事件：日期选择框改变
            onChangeDate: function (e) {
                // api: 获取数据概况
                this.__getApiData__survey(e[0], e[1]);
            },

            // 获取数据概况
            __getApiData__survey: function (startDate, endDate) {
                var app = this;
                // 请求api数据
                app.survey.loading = true;
                // api地址
                var url = '/<{$routeUrl}>/survey';
                $.post(url, {
                    startDate: startDate,
                    endDate: endDate
                }, function (result) {
                    app.survey.order_total = result.data.order_total;
                    app.survey.order_total_price = result.data.order_total_price;
                    app.survey.loading = false;

                });
                // this.drawLine(this.survey.order_total,this.survey.order_total_price);
            },

            /**
             * 近七日交易走势
             * @type {HTMLElement}
             */
            drawLine() {
                /**
                 * 近七日交易走势
                 * @type {HTMLElement}
                 */
                var dom = document.getElementById('echarts-trade');
                echarts.init(dom, 'walden').setOption({
                    title: {
                        // text: '近七日科室满意统计'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['调查量', '满意度']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        show: true,
                        showTitle: false,
                        feature: {
                            mark: {show: true},
                            magicType: {show: true, type: ['bar', 'line']}
                        }
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        data: <?= $data['widget-echarts']['date'] ?>,
                        nameLocation:'end',//坐标轴名称显示位置。
                        axisLabel : {//坐标轴刻度标签的相关设置。
                            interval:0,
                            textStyle: {
                                fontSize : 10      //更改坐标轴文字大小
                            },
                        }
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    series: [
                        {
                            name: '调查量',
                            type: 'bar',
                            data: this.survey.order_total
                        },
                        {
                            name: '满意度',
                            type: 'bar',
                            data: this.survey.order_total_price
                        }
                    ]
                }, true);
            }

        }

    });

</script>